Hello and welcome.
In this lecture we are going to create a structure for how our app is in hastier mail before we king
use javascript.
We need to have hastier mail and here says implement it because javascript relies on hastier mail and
C S S for it to work.
Alright tab can my text editor open and I am inside my blank hastier mouth file.
So this is where we are going to create the hastier mail.
Could the way this lechowick Gonna work so you don't have to watch me type or the called when a pre
write the code and add a chunk of code at a time and then explain what I have written.
The first line of code here is called a doctype which is a declaration is not actually part of the hate
mail code is just a declaration A tells.
Or gives instructions to the browser or notifies them that the document that the browser is about to
display is an hastier Mail 5 document.
That's all it does.
Line 2 and 5 are they here similar tag line to the beginning located here mail tag.
And inside the opening tag.
We've got a link or language attribute and the value is said to English which is in for short so attributes
basically are used to provide extra information about a tag.
Most tips them all tags have an opening and close tack.
So wherever you have attributes is always inserted in the opening tags.
You can tell the clothes in tab because as the forward slash before the name of the tag.
So any other tags were going to be using will be invested in between this.
His team of attack came so there they're on the hastier mail would be the parent tag.
We have child elements nested in between what we are going to do.
Also in this lake shore we are going to use in line stylin So we are going to do some in success here
as well.
And then later we'll do some external see assess.
That is will be referencing this he says from an external file.
I have added some more code here from Lime 3 to 9.
This is the head tags.
The line 3 is the opening paired tag line.
9 is the.
Close in.
Head tag.
So the head tab contains some information.
The content of the head tag is not actually visible when a visit or visiting a website is just for information
on purposes and to help the search engines with information.
So a line for here caught a murder tack and it's got an attribute metal tags basically are used to provide
extra details so the info I've got the attribute car set and the value is due to if it meant a car said
physically is used to describe the type of encoding what type of character encoding that this page will
be using this standard is utf it which is what I have specified.
Bam five is just a title line 6 on that many times with a name of an attribute name.
Cause description is of value and garner that attribute called content.
Okay so basically the name here is to give a description to as much as possible about the content of
the page.
That's what that is and then the out the other attribute which is content to provide the name which
is what the game does.
Another metal tank in line 7 is with got a attribute of name and value of viewport.
Then the content attribute also is got with equals device minus width initial scale equals 1.
What line 7 is saying is that this web page can be viewed by any device regardless of the screen size
of that device.
All right so even if you are using a little screen a large screen it will automatically reset size to
fit that device.
That's what this weight equals device minus with and this initial clearly of course one it allows you
to zoom so you can start to move from one and zoom in and so that line is just a reference to the externals
tarsha it will be you then.
Which is the style sheet here defined here.
So when we write some starship here war reference it is in this link.
Notice the indentation so you can tell that the head tag is a tout of the Haitian mulct tag.
And these men a news tax here are all children of the head tax.
We didn't take indentation is quite true really.
Sorry it's helpful cause he helps you understand the code better and it's also useful for those that
are reading.
Could I have and a lot of code here in the body attacks though the body tag.
Any content in the body tag is the content that is visible is content that you can see on the web page.
So that's my opening body tag on line 10 and if I go all the way to line.
Four to one.
Does my closing body tag there.
All right.
Kate let me run through the contents of the body tag.
So line 10 is opening body tag line 11.
I've introduced a div and I'm giving the Deve an idea of we're apart.
So this will act as a container that will wrap or the content.
All right so that's the opening Dave on line 11 and close in Dave online.
Thirty seven.
We also introduced a table tag so deterrable is well put.
So that content and a table starts hartline 12.
That's the opening table and the closing table is online.
Thirty five tables consists of tedi.
We show the actual table data where you place the data and you can have table rules as well both for
here.
Yes we have table data and table rows.
So here on line 12.
We've specified a table with how why you want the table to be.
Choose 400 inches.
The height is three inches a line centre.
I want the table to be centred.
Okay.
That's the tool with.
And then we get the tedi which is a table data.
We've got Deve describe them giving the Deve idea of one and the star will also apply some styling here.
This is what I meant by the inline stylin.
So I'm styling it in line.
So these are the properties have given the style font size I want to fonts to be that size the weight
I wanted to be bold.
So they want the item in blue a cork property here says propertys.
Okay so the border and one of border to be five pixels and I wanted to be solid green and the padding.
I've set it to Dad and this is what will show in that cell.
So I repeated the same process for some of the other tables table data.
Okay.
Okay so DTD patchouli used to define the cell in the table.
Y t r.
It used to define the rule in the table of t t r.
Here it defines the row in the table.
Y t d defines this cell in the table.
Right so we are using mainly tedi here.
So line 20 to 22.
We've defined another table tedi here which is defines the cell of a cell and inside that we've got
a div with an I.D. number two.
So the idea is we'll used later for stylin purposes.
And again we have different find some success in online properties so mosul is the assessed property
are the same so I would not be running through each and every one of them is the same font size defines
the font font way it defines how the how Bauld the text will be.
Padding refers to this space inside while margin refers to the space outside.
Alright so are the processors the same.
No way I defined a few cells on line 29 are defined.
An input inside this cell inside a cell the cells acts come like the old container in a table saw for
line 27 cell to 30 have defined the import element.
So this is where you actually typing the answers to the question.
So given is some styling standard stylin have also given it a border here.
And these are the border properties have applied.
Okay got another input on my 31 inside the cell and give you an idea button.
This would be the outer button that you click to check your answers and then the row ends here.
So this is the beginning.
This is the end of the table row on line 30 for the opening table row is on line 13 All right and we've
got our closing table here.
Nine thirty five.
Andy Deve closes.
I am 39.
Is this script.
It's always good to put your script just before you close the embody tag because it prevents this group
from executing.
You wait for the content of the page to load first before the script is executed.
So that is.
Our seers are here CML and some in Lyons time in done for this project.
So I just say that week in view and see what it looks like at the moment.
So I just opened up the folder and just double click and see what it looks like.
KS So this is what our uploads look at a moment there's no functionality at the moment because we need
to define that with javascript.
So now if you do anything it will not work.
If I see three and click that nothing will works well the javascript will create the functionality for
that.
So thanks for watching.
Bye for now.